<template>
    <div class="faq">
      <h1>常见问题</h1>
  
      <!-- 问题列表 -->
      <section class="faq-list">
        <!-- 问题1 -->
        <div class="faq-item">
          <h2>如何注册成为会员？</h2>
          <p>您可以在我们的网站上点击“注册”按钮，填写必要的信息并提交注册申请。完成注册后，您即可成为我们的会员，享受会员专属优惠和服务。</p>
        </div>
  
        <!-- 问题2 -->
        <div class="faq-item">
          <h2>如何查看订单状态？</h2>
          <p>登录您的账户，进入“我的订单”页面，您可以查看每个订单的详细信息，包括订单状态、物流信息和预计送达时间。</p>
        </div>
  
        <!-- 问题3 -->
        <div class="faq-item">
          <h2>如何联系客服？</h2>
          <p>您可以通过以下方式联系我们的客服团队：<br>
            - 客服电话：+123456789<br>
            - 客服邮箱：support@example.com<br>
            - 在线聊天：通过网站右下角的在线聊天功能联系我们的客服。</p>
        </div>
  
        <!-- 问题4 -->
        <div class="faq-item">
          <h2>如何申请退款？</h2>
          <p>如果您需要申请退款，请登录您的账户，找到对应的订单，点击“申请退款”按钮并填写退款申请表格。我们的售后团队将会在收到申请后尽快处理。</p>
        </div>
  
        <!-- 问题5 -->
        <div class="faq-item">
          <h2>如何修改个人信息？</h2>
          <p>登录您的账户，进入“个人信息”页面，您可以修改您的个人信息，包括姓名、联系方式和地址等。请确保信息的准确性，以便我们为您提供更好的服务。</p>
        </div>
      </section>
    </div>
  </template>
  
  <script setup>
  </script>
  
  <style scoped>
  .faq {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  h1, h2 {
    color: #333;
  }
  
  .faq-item {
    margin-bottom: 30px;
  }
  
  .faq-item h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
  }
  
  .faq-item p {
    line-height: 1.6;
  }
  </style>
  